{% include "data/template-ui.html" %}
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    thead th {
        border-bottom: 2px solid #dee2e6;
    }
    tbody tr td {
        padding: 9px;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
    #demand_table {
        line-height: 19px;
    }
    .alert {
        margin-bottom: 0px;
        margin-left: 1%
    }
</style>

<!-- 正文主体 -->
<div class="page-wrapper">
    <!-- 标题 -->
    <div class="row page-titles">
        <div class="col-md-4 align-self-center">
            <h3 class="text-primary">风险集市数据质量仪表盘</h3>
        </div>

        <div class="col-md-5 align-self-center">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                    style="background-color:#007bff;">
                    当前显示季度:{{ quarter }} <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    {% for quarter_list in db_quarter_list %}
                    <li><a href="?quarter={{ quarter_list }}">{{ quarter_list }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="col-md-3 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="../../data/index">主页</a></li>
                <li class="breadcrumb-item active">仪表盘</li>
            </ol>
        </div>
    </div>

    <div class="container-fluid animated fadeInUp">
        <!--数据概览-->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title" style="margin-bottom: -10px;">数据质量总览</h4>
                        <div class="card-content">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card bg-pink p-20">
                                        <div class="media widget-ten">
                                            <div class="media-left meida media-middle">
                                                <span><i class="ti-vector f-s-40"></i></span>
                                            </div>
                                            <div class="media-body media-text-right">
                                                <h2 class="color-white" id="all_cnt"></h2>
                                                <p class="m-b-0">检核数据总量</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-danger p-20">
                                        <div class="media widget-ten">
                                            <div class="media-left meida media-middle">
                                                <span><i class="ti-location-pin f-s-40"></i></span>
                                            </div>
                                            <div class="media-body media-text-right">
                                                <h2 class="color-white" id="problem_cnt"></h2>
                                                <p class="m-b-0">问题数据总量</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-primary p-20">
                                        <div class="media widget-ten">
                                            <div class="media-left meida media-middle">
                                                <span><i class="ti-bag f-s-40"></i></span>
                                            </div>
                                            <div class="media-body media-text-right">
                                                <h2 class="color-white" id="problem_per"></h2>
                                                <p class="m-b-0">问题占比</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="alert alert-secondary alert-dismissible fade show">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <strong>注：</strong> 本季度的检核逻辑主要针对数据的规范性，尚未检核数据的准确性
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--问题占比-->
        <div class="row">
            <div class="col-lg-9">
                <div class="card">
                    <h4 class="card-title">{{ quarter }}数据质量问题概况</h4>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>公司</th>
                                        <th>检核数据量</th>
                                        <th>问题数据量</th>
                                        <th>问题数据占比</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td>信托</td>
                                        <td>135685860</td>
                                        <td>4034</td>
                                        <td>0.00%</td>
                                    </tr>
                                    <tr>
                                        <td>资产</td>
                                        <td>257203</td>
                                        <td>0</td>
                                        <td>0.00%</td>
                                    </tr>
                                    <tr>
                                        <td>担保</td>
                                        <td>97774</td>
                                        <td>0</td>
                                        <td>0.00%</td>
                                    </tr>
                                    <tr>
                                        <td>金科</td>
                                        <td>42560702</td>
                                        <td>0</td>
                                        <td>0.00%</td>
                                    </tr>
                                    <tr>
                                        <td>基金1</td>
                                        <td>2381</td>
                                        <td>0</td>
                                        <td>0.00%</td>
                                    </tr>
                                    <tr>
                                        <td>基金2</td>
                                        <td>5873</td>
                                        <td>0</td>
                                        <td>0.00%</td>
                                    </tr>
                                    <tr>
                                        <td>金租</td>
                                        <td>4125</td>
                                        <td>566</td>
                                        <td>13.72%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card">
                    <div class="card-title">
                        <h4>数据质量问题占比</h4>
                    </div>
                    <div class="card-body">
                        <div class="current-progress">
                            
                            <h5 style="margin-top: 26px;">信托<span class="pull-right">0.00%</span>
                            </h5>
                            <div class="progress ">
                                <div class="progress-bar bg-danger wow animated progress-animated" style="width: 0.00%; height:6px;" role="progressbar"> <span class="sr-only"></span> </div>
                            </div>
                            
                            <h5 style="margin-top: 26px;">资产<span class="pull-right">0.00%</span>
                            </h5>
                            <div class="progress ">
                                <div class="progress-bar bg-danger wow animated progress-animated" style="width: 0.00%; height:6px;" role="progressbar"> <span class="sr-only"></span> </div>
                            </div>
                            
                            <h5 style="margin-top: 26px;">再担保<span class="pull-right">0.00%</span>
                            </h5>
                            <div class="progress ">
                                <div class="progress-bar bg-danger wow animated progress-animated" style="width: 0.00%; height:6px;" role="progressbar"> <span class="sr-only"></span> </div>
                            </div>
                            
                            <h5 style="margin-top: 26px;">金科<span class="pull-right">0.00%</span>
                            </h5>
                            <div class="progress ">
                                <div class="progress-bar bg-danger wow animated progress-animated" style="width: 0.00%; height:6px;" role="progressbar"> <span class="sr-only"></span> </div>
                            </div>
                            
                            <h5 style="margin-top: 26px;">基金创投<span class="pull-right">0.00%</span>
                            </h5>
                            <div class="progress ">
                                <div class="progress-bar bg-danger wow animated progress-animated" style="width: 0.00%; height:6px;" role="progressbar"> <span class="sr-only"></span> </div>
                            </div>
                            
                            <h5 style="margin-top: 26px;">中银粤财<span class="pull-right">0.00%</span>
                            </h5>
                            <div class="progress ">
                                <div class="progress-bar bg-danger wow animated progress-animated" style="width: 0.00%; height:6px;" role="progressbar"> <span class="sr-only"></span> </div>
                            </div>
                            
                            <h5 style="margin-top: 26px;">金租<span class="pull-right">13.72%</span>
                            </h5>
                            <div class="progress ">
                                <div class="progress-bar bg-danger wow animated progress-animated" style="width: 13.72%; height:6px;" role="progressbar"> <span class="sr-only"></span> </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 各公司平均问题占比 -->
            <div class="col-lg-7">
                <div class="card" id="echarts1" style="width:100%;height:400px;"></div>
            </div>

            <!-- 集团总问题占比趋势 -->
            <div class="col-lg-5">
                <div class="card" id="echarts5" style="width:100%;height:400px;"></div>
            </div>
        </div>

        <!-- 各公司需求改造进度 -->
        <div class="row">
            <div class="col-lg-7">
                <div class="card" id="echarts4" style="width:100%;height:400px;"></div>
            </div>

            <div class="col-lg-5">
                <div class="card" style="width:100%;height:400px;">
                    <h5 class="card-title">各公司需求改造进度</h5>
                    <h4 class="card-subtitle">{{ quarter }}风险集市相关</h4>
                    <table id="demand_table"></table>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 各公司数据量占比 -->
            <div class="col-lg-7">
                <div class="card" id="echarts3" style="width:100%;height:500px;"></div>
            </div>

            <!-- 各公司同类问题Top 10统计 -->
            <div class="col-lg-5">
                <div class="card" id="echarts2" style="width:100%;height:500px;"></div>
            </div>
        </div>

    </div>
</div>

<!-- footer -->
<footer class="navbar-fixed-bottom" style="line-height: 10px;font-size:13px;">
    <div class="footer">
        © 2019 Hyhyhyhyhyhyh
    </div>
</footer>
</div>

{% load staticfiles %}
<!-- Jquery -->
<script src="{% static 'js/lib/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{% static 'js/lib/bootstrap/js/popper.min.js' %}"></script>
<script src="{% static 'js/lib/bootstrap/js/bootstrap.min.js' %}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{% static 'js/jquery.slimscroll.js' %}"></script>
<!--Menu sidebar -->
<script src="{% static 'js/sidebarmenu.js' %}"></script>
<!--stickey kit -->
<script src="{% static 'js/lib/sticky-kit-master/dist/sticky-kit.min.js' %}"></script>
<script src="{% static 'js/custom.min.js' %}"></script>

<script>
    var color = [
    "#60acfc",
    "#32d3eb",
    "#5bc49f",
    "#feb64d",
    "#ff7c7c",
    "#9287e7",
    "#009688"] ;
    
    var myChart1 = echarts.init(document.getElementById('echarts1'));
    var option = {
        color : '#ff7c7c',
        title : {
            text: '各公司平均问题占比（%）',
            subtext: '风险集市相关',
            x:'left'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            }
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        legend: {
            x: 'left',
            top: '15%',
        },
        dataset: {
            source: []
        },
        xAxis: [
            {type: 'category', gridIndex: 0},
        ],
        yAxis: [
            {gridIndex: 0},
        ],
        series: [
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
        ],
        grid:{
            top: 100,
        },
        dataZoom: [{
            show: true,
            bottom: 0,
            start: 15,
            end: 75,
        },{
            type: 'inside',
            start: 94,
            end: 100
        }],
    };
    myChart1.setOption(option);
    myChart1.showLoading();

    $.ajax({
        type : "GET",
        async : false,
        url : "../../api/dashboard/avg_problem_percentage",    
        data: {},
        dataType : "json",
        success : function(result) {
            myChart1.hideLoading();              //隐藏加载动画
            myChart1.setOption({                 //加载数据图表
            //渲染echarts
                dataset: {
                    source: result
                },
            });
        },
    })

    var myChart2 = echarts.init(document.getElementById('echarts2'));
    var option = {
        color: color,
        title : {
            text: '各公司同类问题Top 5统计',
            subtext: "{{ quarter }}"+'（风险集市相关）',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
        },
        series : [{
            type: 'pie',
            radius : '55%',
            center: ['50%', '55%'],
            data: [],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    myChart2.setOption(option);
    myChart2.showLoading();

    $.ajax({
        type : "GET",
        async : false,
        url : "../../api/dashboard/same_problem_top5",    
        data: {
            quarter: "{{ quarter }}"
        },
        dataType : "json",
        success : function(result) {
            var names = result.name || []
            var values = result.value || []
            var data = []
            for(var i=0;i<names.length;i++){
                data.push({ name: names[i], value: values[i] })
            }
            myChart2.hideLoading();
            myChart2.setOption({
                series : [{
                    data: data,
                }]
            });
        },
    })


    var myChart3 = echarts.init(document.getElementById('echarts3'));
    var option = {
        color: color,
        title : {
            text: '各公司数据量占比',
            subtext: '{{ quarter }}'+'（风险集市相关）',
            x:'left'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            y: 'bottom',
            data:['信托','资产','担保','金科','基金1','基金2','金租']
        },
        series: [
            {
                name:'数据库来源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                center: ['55%', '55%'],
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: []
            },
            {
                name:'数据量占比',
                type:'pie',
                radius: ['40%', '55%'],
                center: ['55%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[]
            }
        ]
    };
    myChart3.setOption(option);
    myChart3.showLoading();

    $.ajax({
        type : "GET",
        async : false,
        url : "../../api/dashboard/subcompany_data_percentage",    
        data: {
            quarter: "{{ quarter }}"
        },
        dataType : "json",
        success : function(result) {
            myChart3.setOption({
                series: [{},
                {
                    data: result
                }]
            });
        },
    })

    $.ajax({
        type : "GET",
        async : false,
        url : "../../api/dashboard/count_db_rows",    
        data: {
            quarter: "{{ quarter }}"
        },
        dataType : "json",
        success : function(result) {
            myChart3.hideLoading();
            myChart3.setOption({
                series: [{
                    data: result
                }]
            });
        },
    })



    var myChart4 = echarts.init(document.getElementById('echarts4'));
    var option = {
        color : ['#FFC000','#70AD47','#5B9BD5'],
        title : {
            text: '需求改造进度',
            subtext: "{{ quarter }}"+'风险集市相关',
            x:'left'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['未完成','已完成','无需改造']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: []
        },
        series: [
            {
                name: '未完成',
                type: 'bar',
                stack: '总量',
                data: []
            },
            {
                name: '已完成',
                type: 'bar',
                stack: '总量',
                data: []
            },
            {
                name: '无需改造',
                type: 'bar',
                stack: '总量',
                data: []
            },
        ]
    };

    myChart4.setOption(option);
    myChart4.showLoading();

    // 请求接口数据-填充[问题数据统计]
    $.ajax({
        type : "get",
        async : false,
        url : "../../static/resource/demand.json",    
        data: {},
        dataType : "json",
        success : function(result) {
            if (result) {
                //去重获取公司名
                var company = [];
                for(var i=1;i<result.length;i++){
                    if (company.indexOf(result[i][1])==-1){
                        company.push(result[i][1]);
                    }
                }

                //获取当前季度的列号
                var unfinished_list  = [];
                var finished_list    = [];
                var noneed_list      = [];
                for(var i=5;i<result[0].length;i++){
                    if (result[0][i].substr(0,6) == '{{ quarter }}'){
                        var quarter = i;
                        break;
                    }
                }
                //改造进度计数
                for(var i=0;i<company.length;i++){
                    var unfinished_count = 0;
                    var finished_count   = 0;
                    var noneed_count     = 0;
                    for (var t=1;t<result.length;t++){
                        if (result[t][1] != company[i]){
                            continue;
                        }
                        else{
                            if (result[t][quarter] == '进行中' || result[t][quarter] == '未完成' || result[t][quarter] == '未开展'){
                                unfinished_count++;
                            }
                            else if (result[t][quarter] == '完成'){
                                finished_count++;
                            }
                            else {
                                noneed_count++;
                            }
                        }
                    }
                    unfinished_list.push(unfinished_count);
                    finished_list.push(finished_count);
                    noneed_list.push(noneed_count);
                }

                myChart4.hideLoading();              //隐藏加载动画
                myChart4.setOption({                 //加载数据图表
                //渲染echarts
                    yAxis: {
                        type: 'category',
                        data: company
                    },
                    series: [
                        {
                            data: unfinished_list
                        },
                        {
                            data: finished_list
                        },
                        {
                            data: noneed_list
                        },
                    ]
                });

                //渲染table
                var html = "<thead><th>公司</th><th>未完成需求数</th><th>已完成需求数</th><th>完成率</th></thead><tbody>";
                var total_unfinished = 0;
                var total_finished   = 0;
                var total_noneed     = 0;
                for(var i=0;i<company.length;i++){
                    var unfinished = unfinished_list[i]
                    var finished   = finished_list[i]
                    var noneed     = noneed_list[i]
                    var finished_per = (finished+noneed)/(finished+noneed+unfinished)*100
                    total_unfinished += unfinished;
                    total_finished   += finished;
                    total_noneed     += noneed;
                    total_finished_per = (total_finished+total_noneed)/(total_finished+total_noneed+total_unfinished)*100
                    html += "<tr>";
                    html += "<td>" + company[i] + "</td>";
                    html += "<td style=\"color:red;\">" + unfinished + "</td>";
                    html += "<td style=\"color:green;\">" + (finished+noneed) + "</td>";
                    html += "<td>" + finished_per.toFixed(2) + "%</td>";
                    html += "</tr>";
                }
                html += "<tr style=\"font-weight: 600;\"><td>集团合计</td>"
                html += "<td style=\"color:red;\">" + total_unfinished + "</td>";
                html += "<td style=\"color:green;\">" + (total_finished+total_noneed) + "</td>";
                html += "<td>" + total_finished_per.toFixed(2) + "%</td></tr>";
                html += "</tbody>";
                document.getElementById("demand_table").innerHTML = html;
            }
        },
        error : function(errorMsg) {
            console.log(errorMsg);
        }
    })

    //集团总问题占比
    var myChart5 = echarts.init(document.getElementById('echarts5'));
    var option = {
        color: "#4CAF50",
        title : {
            text: '集团总问题占比（%）',
            subtext: '风险集市相关',
            x:'left'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
        }],
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        dataZoom: [{
            show: true,
            bottom: 0,
            start: 0,
            end: 100,
            width: '70%',
            x: '15%'
        },
        {
            type: 'inside',
            start: 94,
            end: 100
        },
        ],
    };
    myChart5.setOption(option);
    myChart5.showLoading();

    $.ajax({
        type : "GET",
        async : false,
        url : "../../api/dashboard/total_trend",    
        data: {},
        dataType : "json",
        success : function(result) {
            myChart5.hideLoading();
            myChart5.setOption({
                xAxis: {
                    data: result.quarter
                },
                series: [{
                    data: result.value,
                }]
            });
        },
    })

    //数据质量总览
    $.ajax({
        type : "GET",
        async : false,
        url : "../../api/dashboard/data_overiew",    
        data: {
            quarter: "{{ quarter }}"
        },
        dataType : "json",
        success : function(result) {
            all_cnt = document.getElementById("all_cnt");
            all_cnt.innerHTML = result.all_cnt;
            problem_cnt = document.getElementById("problem_cnt");
            problem_cnt.innerHTML = result.problem_cnt;
            problem_per = document.getElementById("problem_per");
            problem_per.innerHTML = result.problem_per + '%';
        },
    })

    //根据窗口缩放动态调整echarts大小
    $('.chart').resize(function(){
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
    });
</script>

</body>

</html>